<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>行业物料生成</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js" type="text/javascript"></script>
 <script src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js" type="text/javascript"></script>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/layui.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/global.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css" >


 <style>
  .container{
   	width:85%;
   	
  }
  
  .modal-industry{
  	width:700px;
  }
  .modal-body{
    max-height:700px
  }
   .modal-body-industry{
  	height:450px;
  }
    
 </style>

</head>
<body>
<%@include file="/webpage/frame/top.jsp" %>
<div class="container">
	<div id="topContent" class="layui-form-pane">
		<div class="layui-form-item" style="margin-bottom:0px;">
			<div class="layui-inline">
			      <label class="layui-form-label">行业选择</label>
			      <div class="layui-input-inline">
			        <select id="industrySel" lay-verify="" lay-search style="margin-left:3px;">
			          <!-- <option value="">选择全部行业</option> -->
			        </select>
			      </div>
			</div>	
				
			<input id="promotionPlanName" type="text" class="form-control" placeholder="请输入主营业务" maxlength="18" style="width:280px;margin-left:15px;margin-bottom:15px;"/>
			<button id="createM" class="layui-btn layui-btn-normal layui-btn-radius" style="margin-bottom:15px;" title="根据行业和主营业务，生成">生成物料</button>
			<span class="alert"></span>
		</div>
		<div class="layui-form-item" style="margin-bottom:0px;">
			<div class="layui-inline">
			     
			      <div class="layui-input-inline">
			        <select id="industrySel2" lay-verify="" lay-search style="margin-left:3px;">
			         <option value="">请选择行业</option> 
			        </select>
			      </div>
			</div>	
			
			        <select id="mainBussiness" lay-verify="" lay-search style="margin-left:15px;">
			           <option value="">请选择主营业务</option> 
			        </select>
			      
			
			<button id="inverse" class="layui-btn layui-btn-normal layui-btn-radius" style="margin-bottom:15px;" title="根据行业和主营业务查询">否词策略</button>
			<span class="alert2"></span>
		</div>
	</div>		

	
	
	<table id="material"  data-show-refresh="true"
              data-search="true"
              data-click-to-select="true"
              data-show-export="true"
              data-query-params="queryParams"
              data-pagination="true"
		   	  data-toolbar=".toolbar"		   
              >
             <!-- data-show-columns="true"  -->          
           <thead>
           <tr>
           	<!-- <th data-field="state" data-radio="true"></th> -->
            <th data-field="industryId" data-visible="false">所属行业id</th>
            <th data-field="industryName" data-visible="false">行业名称</th>
            <th data-field="promotionPlanName">推广计划名称</th>
            <th data-field="promotionUnitName">推广单元名称</th>
            <th data-field="keyword">关键词名称</th>
            <!-- <th data-field="clickRate">点击率</th> -->
            <th data-field="originalityTitle">创意标题</th>
            <th data-field="originalityDescribeOne">创意描述1</th>
            <th data-field="originalityDescribeTwo">创意描述2</th>
             <th data-field="keywordMatchPattern">关键词匹配模式</th>
              <th data-field="keywordPrice">关键词出价</th>
             
<!--             <th data-field="action"
                data-align="center"
                data-formatter="actionFormatter"
                data-events="actionEvents">操作</th> -->
                
           </tr>
           </thead>
		
	</table>

</div>

<script>

	function clickExport(aLink){
		var industryId = $("#industrySel").val();
		var mainBussiness = $("#promotionPlanName").val();
		
		aLink.href = "${pageContext.request.contextPath}/materialController.do?exportCSV&industryId="+industryId+"&mainBussiness="+mainBussiness;
	}
	//加载全部行业
	function loadIndustry() {
		$.get("${pageContext.request.contextPath}/industryController.do?getAllIndustry",
				function(result){
			      var data = $.parseJSON(result);			     
			       for(i=0;i<data.length;i++){				    	  
			    	  $("#industrySel").append("<option value='"+data[i]["id"]+"'>"+data[i]["industry"]+"</option>");
			    	  $("#industrySel2").append("<option value='"+data[i]["id"]+"'>"+data[i]["industry"]+"</option>");
			       }				    	
				}					
		);   
	} 

	//加载物料列表
	var API_URL = '${pageContext.request.contextPath}/materialController.do?listMaterial';	
	var $table = $('#material').bootstrapTable(
			{
				url: API_URL,
				pageSize:25,
				pageList : [15, 25, 100, 500],
				queryParams : {
						industryId : $('#industrySel').val() == null ? '' : $('#industrySel').val(),
						promotionPlanName : $("#promotionPlanName").val() 
				},
				height: getHeight(),
				//treeShowField: 'promotionPlanInfoList'
			}),     
	   $modal = $('#modal').modal({show: false}),
	   $alert = $('.alert').hide();
	   $alert2 = $('.alert2').hide();
	
	//获取相对的固定高度
     function getHeight() {
        return $(window).height()-200;
    }
	
    //按行业和主营业务生成物料
	$("#createM").click(
		function () {			
			var plan = $("#promotionPlanName").val();
			if(plan != '') {
				var query = {
					industryId : $('#industrySel').val(),
					promotionPlanName : plan
				};	
				
		        //刷新服务器数据
		    	$('#material').bootstrapTable('refresh', {query:query});
			} else {
				showAlertModal('请输入主营业务', 'danger');
			}
		}
	);
	
   //延迟加载 
   $(function() {
	   //加载全部行业
	   loadIndustry();
	     
	   
   }); 
    
   function showAlertModal(title, type) {   	
   	$alert.attr('class', 'alert alert-' + type || 'success')
             .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
   	 setTimeout(function () {
   		 	$alert.hide();
        }, 3000);      
   }  
   function showAlertModal2(title, type) {   	
	   	$alert2.attr('class', 'alert alert-' + type || 'success')
	             .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
	   	 setTimeout(function () {
	   		 	$alert2.hide();
	        }, 3000);      
	   }  
   
   $(document).keydown(function(event){ 
		if(event.keyCode==13){ 
		$("#createM").click(); 
		} 
	});    
    

   $("#inverse").click(
		function(){
			var industryId = $("#industrySel2").val();
			var industryName = $("#industrySel2 option:selected").text();
			var mid = $("#mainBussiness").val();
			var mainBussiness = $("#mainBussiness option:selected").text();
			
			if(industryId==""){
				showAlertModal2('请选择行业', 'danger');
			}else if(mid==""){
				showAlertModal2('请选择主营业务', 'danger');
			}else{
				
				$.get(
						'${pageContext.request.contextPath}/materialController.do?getInverseList&industryId='+industryId+"&mainBussiness="+mainBussiness,
					function(result){
							
						
						//$(location).attr('href','${pageContext.request.contextPath}/materialController.do?showInverse&industryId='+industryId+"&mainBussiness="+mainBussiness);
						if(!(result==''||result==null)){
							
							$(location).attr('href','${pageContext.request.contextPath}/materialController.do?showInverse&industryId='+industryId+"&mainBussiness="+mainBussiness);
							/* r = "$(location).attr(\'href\',\'${pageContext.request.contextPath}/materialController.do?showInverse&industryId=\'"+industryId+'&mainBussiness='+mainBussiness+")"; */
						}else{
							alert("该主营业务的否词策略为空！");
							
						}
					}
				);
				
				
			}
		}	   
   );
   $("#industrySel2").change(
			
			function(){
				var industryId = $("#industrySel2").val();
				$.get(
						'${pageContext.request.contextPath}/materialController.do?getMainBussinessByIndustryId',
								{industryId:industryId},
						function(result){
									$("#mainBussiness").empty();
									 $("#mainBussiness").append("<option value=''>请选择主营业务</option>");
							var data = $.parseJSON(result);	
							for(i=0;i<data.length;i++){	
								
								
						    	  $("#mainBussiness").append("<option value='"+data[i]["id"]+"'>"+data[i]["mainBussiness"]+"</option>");
						    	 
						       }	
						}				
				);
			}
	);
   
</script>
<%@include file="/webpage/frame/bottom.jsp" %>
</body>
</html>